<template>
  <div id="home">
    <div class="home_top">
      <top ref="top" @campusChange="campusChange" :setlogo="true"></top>
    </div>

    <div class="home_body">
      <div class="home_left">
        <left></left>
      </div>
      <div class="home_right">
        <div class="home_content">
          <router-view
            ref="view"
            @campusUpdate="campusUpdate"
          ></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import top from "@xey/components/common/top";
import left from "@/components/common/left";

var vm;
export default {
  data: function() {
    return {
      name: ""
    };
  },
  components: {
    top,
    left
  },
  methods: {
    campusChange: function(id) {
      var fun = vm.$refs.view.campusChange;
      if (fun) {
        fun(id);
      }
    },
    campusUpdate: function() {
      vm.$refs.top.campusUpdate();
    },
  },
  created: function() {
    vm = this;
  }
};
</script>

<style scoped lang="scss">
#home {
  height: 100%;
}
.home_top {
  width: 100%;
  min-width: 18.4rem;
  height: 0.82rem;
}
.home_body {
  width: 100%;
  height: calc(100% - 0.82rem);
  min-width: 18.4rem;
  /*overflow: hidden;*/
}
.home_left {
  width: 2.1rem;
  height: 100%;
  float: left;
  background-color: #f5feff;
  /*border-right: 0.01rem solid #e2e7ef;*/
  box-shadow: 0 0 0.3rem 0 rgba(56, 133, 248, 0.26);
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.home_right {
  position: relative;
  width: calc(100% - 2.1rem);
  height: 100%;
  float: left;
}
.home_content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f3f6fb;
}

/*滚动条样式*/
.home_left::-webkit-scrollbar {
  width: 0;
}
.home_content::-webkit-scrollbar {
  width: 0.1rem;
}
.home_content::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background: #bbbbbb;
}
.home_content::-webkit-scrollbar-track {
  background: #f2f6fc;
}
</style>